<template>
  <el-row :gutter="20" class="m-t-5px">
    <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span>
              <span style="font-size: 18px"> 总评论数 : </span>
              <span style="color: #409eff">
                {{ itemData.totalComments ? itemData.totalComments : 0 }}</span
              >
            </span>
          </span>
        </div>

        <div class="total">
          <span></span>
          <span class="emphasis">&nbsp;</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div>
          <div class="compare">
            <span>同比</span>
            <span class="emphasis">{{ itemData.totalCommentsYoy }}%</span>
          </div>
          <div class="compare">
            <span>环比</span>
            <span class="emphasis">{{ itemData.totalCommentsChain }}%</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span style="font-size: 18px"> 好评数 : </span>
            <span style="color: gold"
              >{{ itemData.positiveComments ? itemData.positiveComments : 0 }}
            </span></span
          >
        </div>

        <div class="total">
          <span>好评率</span>
          <span class="emphasis">{{ itemData.positiveRate }}%</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div>
          <div class="compare">
            <span>同比</span>
            <span class="emphasis">{{ itemData.positiveCommentsYoy }}%</span>
          </div>
          <div class="compare">
            <span>环比</span>
            <span class="emphasis">{{ itemData.positiveCommentsChain }}%</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span style="font-size: 18px"> 差评数 : </span>
            <span style="color: red">
              {{
                itemData.negativeComments ? itemData.negativeComments : 0
              }}</span
            >
          </span>
        </div>

        <div class="total">
          <span>差评率</span>
          <span class="emphasis">{{ itemData.negativeRate }}%</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div>
          <div class="compare">
            <span>同比</span>
            <span class="emphasis">{{ itemData.negativeCommentsYoy }}%</span>
          </div>
          <div class="compare">
            <span>环比</span>
            <span class="emphasis">{{ itemData.negativeCommentsChain }}%</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="6" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">
            <span style="font-size: 18px"> 中评数 : </span>
            {{ itemData.neutralComments ? itemData.neutralComments : 0 }}</span
          >
        </div>

        <div class="total">
          <span>中评率</span>
          <span class="emphasis">{{ itemData.neutralRate }}%</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div>
          <div class="compare">
            <span>同比</span>
            <span class="emphasis">{{ itemData.neutralCommentsYoy }}%</span>
          </div>
          <div class="compare">
            <span>环比</span>
            <span class="emphasis">{{ itemData.neutralCommentsChain }}%</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script >
import dialogApply from "@/views/sample/sampleApply/dialogApply.vue";

import CountTo from "vue-count-to";
// import { reactive } from "vue";
export default {
  props: {
    itemData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    // PanelGroup,
    CountTo,
    dialogApply,
    // KoiCard,
  },

  data() {
    return {
      row: {},
      opendialogApply: false,

      crowdTrendeList: {},
      //Sku传递数据
      echartDataSku: {
        columns: [],
        rows: [],
      },
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  created() {},
  methods: {
    getdialogApply(dept) {
      if (dept == "dept") {
        this.row = {
          pageNum: 1,
          thisPageSize: 10,
          appDept: this.itemData.deptName,
        };
      } else {
        this.row = {
          pageNum: 1,
          thisPageSize: 10,
          appDept: this.itemData.deptName,
          applicantId: this.itemData.userName,
        };
      }
      this.opendialogApply = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.emphasis {
  margin-left: 5px;
  color: #333;
  font-weight: 700;
}
.compare-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  /*垂直居中*/
  justify-content: center;
}
.compare {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  /*文字大小*/
  //background: yellow;
  margin-top: 3px;
  color: #666;
}
.total {
  font-size: 16px;
  color: #666;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  // line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 40px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
